home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / switch-content.izs < prev    next >
Text File  |  2005-09-01  |  13KB  |  367 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Switch Content Script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>One of the most versatile scripts of its kind, we created this one to compact arbitrary content on your page so they're expandable on demand. This allows you to save space within your webpage and even add to the aesthetics of the webpage's design in many cases. What sets this script apart from most other you'll find are the following features:
  9.  
  10. Works in both IE5+ and NS6+, and degrades fully with other browsers. In the later instances your content will appear normally. 
  11. Extremely versatile. The script can be applied to content of all types on your webpage, such as <DIV>, <P>, <TABLE>s etc. 
  12. Two expanding behaviors- specify whether only one content should be open at any one time, or that previously open content continue to be visible. 
  13. Easily specify an optional "expand" and "contract" symbol, to be shown dependant on the corresponding content state. Symbol can be any HTML, such as an image. 
  14. New! Added optional "contact all" and "expand all" links. 
  15. Persistence feature. You can specify whether the script should remember the state of the content structure when the user navigates away to a different page. When enabled, returning to the page will cause the script to return the content to its last state (ie: third content expanded). 
  16. Yes your mind is running wild with ideas now...
  17.  
  18. <!/DESCRIPTION> 
  19.  
  20. <!CATEGORY>dynamic content<!/CATEGORY>
  21.  
  22. <!SCRIPT>
  23. <!-- START OF SCRIPT -->
  24. <!-- Step 1: Add the following script into the <HEAD> section of your page: -->
  25. <script type="text/javascript">
  26.  
  27. /***********************************************
  28. * Switch Content script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  29. * This notice must stay intact for legal use. Last updated April 2nd, 2005.
  30. * Visit http://www.dynamicdrive.com/ for full source code
  31. ***********************************************/
  32.  
  33. var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
  34. var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
  35.  
  36. var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
  37. var expandsymbol='+ ' //HTML for expand symbol.
  38.  
  39.  
  40. if (document.getElementById){
  41. document.write('<style type="text/css">')
  42. document.write('.switchcontent{display:none;}')
  43. document.write('</style>')
  44. }
  45.  
  46. function getElementbyClass(rootobj, classname){
  47. var temparray=new Array()
  48. var inc=0
  49. var rootlength=rootobj.length
  50. for (i=0; i<rootlength; i++){
  51. if (rootobj[i].className==classname)
  52. temparray[inc++]=rootobj[i]
  53. }
  54. return temparray
  55. }
  56.  
  57. function sweeptoggle(ec){
  58. var thestate=(ec=="expand")? "block" : "none"
  59. var inc=0
  60. while (ccollect[inc]){
  61. ccollect[inc].style.display=thestate
  62. inc++
  63. }
  64. revivestatus()
  65. }
  66.  
  67.  
  68. function contractcontent(omit){
  69. var inc=0
  70. while (ccollect[inc]){
  71. if (ccollect[inc].id!=omit)
  72. ccollect[inc].style.display="none"
  73. inc++
  74. }
  75. }
  76.  
  77. function expandcontent(curobj, cid){
  78. var spantags=curobj.getElementsByTagName("SPAN")
  79. var showstateobj=getElementbyClass(spantags, "showstate")
  80. if (ccollect.length>0){
  81. if (collapseprevious=="yes")
  82. contractcontent(cid)
  83. document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
  84. if (showstateobj.length>0){ //if "showstate" span exists in header
  85. if (collapseprevious=="no")
  86. showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
  87. else
  88. revivestatus()
  89. }
  90. }
  91. }
  92.  
  93. function revivecontent(){
  94. contractcontent("omitnothing")
  95. selectedItem=getselectedItem()
  96. selectedComponents=selectedItem.split("|")
  97. for (i=0; i<selectedComponents.length-1; i++)
  98. document.getElementById(selectedComponents[i]).style.display="block"
  99. }
  100.  
  101. function revivestatus(){
  102. var inc=0
  103. while (statecollect[inc]){
  104. if (ccollect[inc].style.display=="block")
  105. statecollect[inc].innerHTML=contractsymbol
  106. else
  107. statecollect[inc].innerHTML=expandsymbol
  108. inc++
  109. }
  110. }
  111.  
  112. function get_cookie(Name) { 
  113. var search = Name + "="
  114. var returnvalue = "";
  115. if (document.cookie.length > 0) {
  116. offset = document.cookie.indexOf(search)
  117. if (offset != -1) { 
  118. offset += search.length
  119. end = document.cookie.indexOf(";", offset);
  120. if (end == -1) end = document.cookie.length;
  121. returnvalue=unescape(document.cookie.substring(offset, end))
  122. }
  123. }
  124. return returnvalue;
  125. }
  126.  
  127. function getselectedItem(){
  128. if (get_cookie(window.location.pathname) != ""){
  129. selectedItem=get_cookie(window.location.pathname)
  130. return selectedItem
  131. }
  132. else
  133. return ""
  134. }
  135.  
  136. function saveswitchstate(){
  137. var inc=0, selectedItem=""
  138. while (ccollect[inc]){
  139. if (ccollect[inc].style.display=="block")
  140. selectedItem+=ccollect[inc].id+"|"
  141. inc++
  142. }
  143.  
  144. document.cookie=window.location.pathname+"="+selectedItem
  145. }
  146.  
  147. function do_onload(){
  148. uniqueidn=window.location.pathname+"firsttimeload"
  149. var alltags=document.all? document.all : document.getElementsByTagName("*")
  150. ccollect=getElementbyClass(alltags, "switchcontent")
  151. statecollect=getElementbyClass(alltags, "showstate")
  152. if (enablepersist=="on" && ccollect.length>0){
  153. document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
  154. firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
  155. if (!firsttimeload)
  156. revivecontent()
  157. }
  158. if (ccollect.length>0 && statecollect.length>0)
  159. revivestatus()
  160. }
  161.  
  162. if (window.addEventListener)
  163. window.addEventListener("load", do_onload, false)
  164. else if (window.attachEvent)
  165. window.attachEvent("onload", do_onload)
  166. else if (document.getElementById)
  167. window.onload=do_onload
  168.  
  169. if (enablepersist=="on" && document.getElementById)
  170. window.onunload=saveswitchstate
  171.  
  172. </script>
  173. <!-- Step 2: Where you wish the "switch" content to appear on your page, insert the below sample HTML: -->
  174. <!--Optional Expand/ Contact All links. Remove if desired-->
  175. <div><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>
  176.  
  177. <h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
  178. <div id="sc1" class="switchcontent">
  179. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  180. </div>
  181.  
  182. <h3 onClick="expandcontent(this, 'sc2')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>Difference betwen Java & JavaScript?</h3>
  183. <div id="sc2" class="switchcontent">
  184. Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
  185. </div>
  186.  
  187. <h3 onClick="expandcontent(this, 'sc3')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is DHTML?</h3>
  188. <div id="sc3" class="switchcontent">
  189. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  190. </div>
  191. <!-- END OF SCRIPT -->
  192. <!/SCRIPT>
  193.  
  194. <!PREVIEW>
  195. <!-- START OF SCRIPT -->
  196. <!-- Step 1: Add the following script into the <HEAD> section of your page: -->
  197. <script type="text/javascript">
  198.  
  199. /***********************************************
  200. * Switch Content script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  201. * This notice must stay intact for legal use. Last updated April 2nd, 2005.
  202. * Visit http://www.dynamicdrive.com/ for full source code
  203. ***********************************************/
  204.  
  205. var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
  206. var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
  207.  
  208. var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
  209. var expandsymbol='+ ' //HTML for expand symbol.
  210.  
  211.  
  212. if (document.getElementById){
  213. document.write('<style type="text/css">')
  214. document.write('.switchcontent{display:none;}')
  215. document.write('</style>')
  216. }
  217.  
  218. function getElementbyClass(rootobj, classname){
  219. var temparray=new Array()
  220. var inc=0
  221. var rootlength=rootobj.length
  222. for (i=0; i<rootlength; i++){
  223. if (rootobj[i].className==classname)
  224. temparray[inc++]=rootobj[i]
  225. }
  226. return temparray
  227. }
  228.  
  229. function sweeptoggle(ec){
  230. var thestate=(ec=="expand")? "block" : "none"
  231. var inc=0
  232. while (ccollect[inc]){
  233. ccollect[inc].style.display=thestate
  234. inc++
  235. }
  236. revivestatus()
  237. }
  238.  
  239.  
  240. function contractcontent(omit){
  241. var inc=0
  242. while (ccollect[inc]){
  243. if (ccollect[inc].id!=omit)
  244. ccollect[inc].style.display="none"
  245. inc++
  246. }
  247. }
  248.  
  249. function expandcontent(curobj, cid){
  250. var spantags=curobj.getElementsByTagName("SPAN")
  251. var showstateobj=getElementbyClass(spantags, "showstate")
  252. if (ccollect.length>0){
  253. if (collapseprevious=="yes")
  254. contractcontent(cid)
  255. document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
  256. if (showstateobj.length>0){ //if "showstate" span exists in header
  257. if (collapseprevious=="no")
  258. showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
  259. else
  260. revivestatus()
  261. }
  262. }
  263. }
  264.  
  265. function revivecontent(){
  266. contractcontent("omitnothing")
  267. selectedItem=getselectedItem()
  268. selectedComponents=selectedItem.split("|")
  269. for (i=0; i<selectedComponents.length-1; i++)
  270. document.getElementById(selectedComponents[i]).style.display="block"
  271. }
  272.  
  273. function revivestatus(){
  274. var inc=0
  275. while (statecollect[inc]){
  276. if (ccollect[inc].style.display=="block")
  277. statecollect[inc].innerHTML=contractsymbol
  278. else
  279. statecollect[inc].innerHTML=expandsymbol
  280. inc++
  281. }
  282. }
  283.  
  284. function get_cookie(Name) { 
  285. var search = Name + "="
  286. var returnvalue = "";
  287. if (document.cookie.length > 0) {
  288. offset = document.cookie.indexOf(search)
  289. if (offset != -1) { 
  290. offset += search.length
  291. end = document.cookie.indexOf(";", offset);
  292. if (end == -1) end = document.cookie.length;
  293. returnvalue=unescape(document.cookie.substring(offset, end))
  294. }
  295. }
  296. return returnvalue;
  297. }
  298.  
  299. function getselectedItem(){
  300. if (get_cookie(window.location.pathname) != ""){
  301. selectedItem=get_cookie(window.location.pathname)
  302. return selectedItem
  303. }
  304. else
  305. return ""
  306. }
  307.  
  308. function saveswitchstate(){
  309. var inc=0, selectedItem=""
  310. while (ccollect[inc]){
  311. if (ccollect[inc].style.display=="block")
  312. selectedItem+=ccollect[inc].id+"|"
  313. inc++
  314. }
  315.  
  316. document.cookie=window.location.pathname+"="+selectedItem
  317. }
  318.  
  319. function do_onload(){
  320. uniqueidn=window.location.pathname+"firsttimeload"
  321. var alltags=document.all? document.all : document.getElementsByTagName("*")
  322. ccollect=getElementbyClass(alltags, "switchcontent")
  323. statecollect=getElementbyClass(alltags, "showstate")
  324. if (enablepersist=="on" && ccollect.length>0){
  325. document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
  326. firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
  327. if (!firsttimeload)
  328. revivecontent()
  329. }
  330. if (ccollect.length>0 && statecollect.length>0)
  331. revivestatus()
  332. }
  333.  
  334. if (window.addEventListener)
  335. window.addEventListener("load", do_onload, false)
  336. else if (window.attachEvent)
  337. window.attachEvent("onload", do_onload)
  338. else if (document.getElementById)
  339. window.onload=do_onload
  340.  
  341. if (enablepersist=="on" && document.getElementById)
  342. window.onunload=saveswitchstate
  343.  
  344. </script>
  345. <!-- Step 2: Where you wish the "switch" content to appear on your page, insert the below sample HTML: -->
  346. <!--Optional Expand/ Contact All links. Remove if desired-->
  347. <div><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>
  348.  
  349. <h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>
  350. <div id="sc1" class="switchcontent">
  351. JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
  352. </div>
  353.  
  354. <h3 onClick="expandcontent(this, 'sc2')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>Difference betwen Java & JavaScript?</h3>
  355. <div id="sc2" class="switchcontent">
  356. Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
  357. </div>
  358.  
  359. <h3 onClick="expandcontent(this, 'sc3')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is DHTML?</h3>
  360. <div id="sc3" class="switchcontent">
  361. DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
  362. </div>
  363.  
  364. <!-- END OF SCRIPT -->
  365. <!/PREVIEW>
  366.  
  367. <!RELATED>NONE<!/RELATED>